<template>
  <div class="exhibition">
    <div class="exhibition-header">
      <p>{{ classify.name }}</p>
      <p @click="goProduct(classify.id)">
        查看更多<i class="el-icon-arrow-right"></i>
      </p>
    </div>
    <ul class="exhibition-con">
      <GoodSingle v-for="item in goods" :item="item"></GoodSingle>
    </ul>
  </div>
</template>

<script>
import { getGoods, getBanner } from "../assets/request.js";
import GoodSingle from "./GoodSingle.vue";
export default {
  data() {
    return {
      goods: [],
    };
  },
  components: {
    GoodSingle,
  },
  props: ["classify"],
  methods: {
    goProduct() {
      this.$router.push({
        name: "product",
        params: {
          moreToProductId: this.classify.id,
        },
      });
    },
  },
  async mounted() {
    let resGoods = await getGoods({
      classify_id: this.classify.id,
    });
    this.goods = resGoods.data.result.rows;
    this.goods.length = 5;
  },
};
</script>

<style lang="scss" scoped>
.exhibition {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  .exhibition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    :first-child {
      font-size: 16px;
      color: #333;
    }
    p {
      font-size: 16px;
      color: black;
    }
  }
  .exhibition-con {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 1100px;
    height: 100%;
    padding: 0 50px;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 220px;
      height: 230px;
      padding: 20px 0;
      margin-right: 25px;
      margin-bottom: 20px;
      background-color: white;
      transition: all 0.5s;
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 10px lightgray;
      }
      &:nth-of-type(5n) {
        margin-right: 0;
      }
      img {
        width: 160px;
        height: 160px;
      }
      p {
        height: 20px;
        padding: 0 10px;
        line-height: 20px;
      }
      .title {
        margin-top: 5px;
        text-align: center;
        font-size: 16px;
        color: black;
        overflow: hidden;
      }
      .discribe {
        font-size: 12px;
        color: #b0b0b0;
        overflow: hidden;
      }
      .price {
        font-size: 16px;
        color: #ff6700;
      }
    }
  }
  .adSingle {
    width: 1000px;
    height: 200px;
    padding: 0 100px;
    margin: 0 auto;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
